<!DOCTYPE html>
<html>
<head>
    <title>监控面板</title>
    <meta charset="utf-8" />
    <script src="/signalr@8.0.7/signalr.min.js"></script>
    <style>
        p{
            margin:0;
            padding:0;
        }
        .box {
            border: 1px solid #bfbfbf;
            margin-top: 10px;
            padding: 10px;
        }
        .box p {
            border-bottom: 1px solid #bfbfbf;
            margin-bottom: 10px;
            font-size:16px;
        }
        #message_product{
            max-height:200px;
            overflow:auto;
        }
    </style>
</head>
<body>
    <h1>监控面板</h1>
    <div>
        <button onclick="connect()">连接</button>
        <button onclick="disconnect()">断开</button>
        <button onclick="sendTest()">发送测试消息</button>
        <button onclick="clearMessages()">清空消息</button>
    </div>
    <div id="status">未连接</div>
    <div class="box">
        <p>商品扫描消息</p>
        <div id="msg_other"></div>
    </div>
    <div class="box">
        <p>抢购消息</p>
        <div id="msg"></div>
    </div>
    <script>
        let connection = null;

        function connect() {
            connection = new signalR.HubConnectionBuilder()
                .withUrl("/chat")
                .build();
            //先解除绑定，以免收到重复消息
            connection.off("ReceiveMessage");
            connection.on("ReceiveMessage", (message, type, time, category) => {
                console.log("收到消息:", category);
                addMessage(`收到: ${message}`, category);
            });

            connection.start()
                .then(() => {
                    clearMessages(); // 连接时清空
                    document.getElementById('status').textContent = '已连接';
                    addMessage('连接成功');
                })
                .catch(err => {
                    console.error('连接失败:', err);
                    document.getElementById('status').textContent = '连接失败: ' + err.message;
                    addMessage('连接失败: ' + err.message);
                });
        }

        function disconnect() {
            if (connection) {
                connection.stop();
                document.getElementById('status').textContent = '已断开';
                addMessage('已断开连接');
                clearMessages(); // 断开时清空
            }
        }

        function sendTest() {
            fetch('/api/chat/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: '测试消息 - 内容搞得很擦会更难过发生的发送发生的发送发生的' + new Date().toLocaleTimeString(),
                    messageType: 'info'
                }),
            })
            .then(response => response.json())
            .then(result => {
                addMessage('发送结果: ' + result.message);
            })
            .catch(error => {
                addMessage('发送失败: ' + error.message);
            });
        }

        function addMessage(text, category) {
            const max = category === 'low' ? 6 : 100;
            const messagesDiv = category === 'low' ? document.getElementById('msg_other') :  document.getElementById('msg');
            const div = document.createElement('div');
            div.textContent = new Date().toLocaleTimeString() + ' - ' + text;
            // 插入到最前面
            if (messagesDiv.firstChild) {
                messagesDiv.insertBefore(div, messagesDiv.firstChild);
            } else {
                messagesDiv.appendChild(div);
            }
            // 最多只保留100条
            while (messagesDiv.childNodes.length > max) {
                messagesDiv.removeChild(messagesDiv.lastChild);
            }
        }

        function clearMessages() {
            document.getElementById('msg').innerHTML = '';
            document.getElementById('msg_other').innerHTML = '';
        }
        window.onload = () => {
            connect();
        }
    </script>
</body>
</html> 